<template>
  <div class="pathContainer">
    <div class="bcColor"></div>
    <h3 class="title">景区旅游路径规划</h3>
    <div class="inner">
      <div class="column">
        <el-button type="primary" @click="pickPoint">点击添加出发点</el-button>
      </div>
      <div class="column">
        <el-button type="primary" @click="zoomToPickPoint">缩放至出发点</el-button>
      </div>
      <div class="column">
        <el-button type="primary" @click="removePickPoint">移除出发点</el-button>
      </div>
    </div>
    <div class="searchPath">
      <el-row class="demo-autocomplete" style="flex-basis: 80%">
        <el-col :span="12">
          <el-autocomplete v-model="state" :fetch-suggestions="querySearch" :trigger-on-focus="false" clearable class="inline-input w-50" placeholder="请输入旅游景点" @select="handleSelect" />
        </el-col>
      </el-row>
      <el-button type="primary" @click="pickJingdian" class="jingdianBtn">确定</el-button>
      <el-button type="primary" @click="removeJingdian" class="jingdianBtn1">移除景点</el-button>
      <el-button type="primary" @click="pathAnalysis" class="jingdianBtn2">规划路径</el-button>
    </div>
  </div>
</template>

<script>
import { h } from 'vue'
import { ElNotification } from 'element-plus'
import bus from '@/utils/bus.js'
export default {
  name: 'Path',
  data() {
    return {
      restaurants: [],
      state: '',
      searchDataUrl: '/data-SiChuan/rest/data/featureResults.geojson?returnContent=true',
      searchDataOption: {
        getFeatureMode: 'SQL',
        datasetNames: ['SiChuan:A级旅游景区名录'],
        maxFeatures: 1000,
        queryParameter: {
          sortClause: null,
          ids: null,
          name: null,
          attributeFilter: 'SMID > 0',
          groupClause: null,
          linkItems: null,
          joinItems: null,
          fields: null
        }
      },
      searchJingdianOption: {
        getFeatureMode: 'SQL',
        datasetNames: ['SiChuan:A级旅游景区名录'],
        maxFeatures: 1000,
        queryParameter: {
          sortClause: null,
          ids: null,
          name: null,
          attributeFilter: 'SMID > 0',
          groupClause: null,
          linkItems: null,
          joinItems: null,
          fields: null
        }
      },
      jingdianPosition: [103.91574601, 33.26917531, 200],
      pathLength: 0
    }
  },
  mounted() {
    // this.restaurants = this.loadAll()
    this.loadAll()
  },
  methods: {
    querySearch(queryString, cb) {
      var restaurants = this.restaurants
      var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants
      // 调用 callback 返回建议列表的数据
      cb(results)
    },
    createFilter(queryString) {
      return restaurant => {
        return restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
      }
    },
    async loadAll() {
      const { data: res } = await this.$http.post(this.searchDataUrl, this.searchDataOption)

      let targetArr = res.features.map(item => {
        return {
          value: item.properties.名称,
          address: item.properties.地址
        }
      })

      this.restaurants = targetArr
    },
    handleSelect(item) {
      console.log(item)
    },
    pickPoint() {
      bus.$emit('changeMarkerStatus')
      ElNotification({
        title: '操作通知！',
        message: h('i', { style: 'color: teal' }, '请在地图中点击以添加出发点'),
        type: 'info'
      })

      bus.$emit('addMarker')
    },
    async pickJingdian() {
      if (this.state === '') {
        ElNotification({
          title: '操作通知！',
          message: h('i', { style: 'color: teal' }, `您尚未添加目标景点！`),
          type: 'info'
        })
      } else {
        ElNotification({
          title: '操作通知！',
          message: h('i', { style: 'color: teal' }, `您添加的目标景点是：${this.state}`),
          type: 'info'
        })
        this.searchJingdianOption.queryParameter.attributeFilter = `名称 = '${this.state}'`
        const { data: res } = await this.$http.post(this.searchDataUrl, this.searchJingdianOption)
        this.jingdianPosition[0] = res.features[0].properties.经度
        this.jingdianPosition[1] = res.features[0].properties.纬度
        this.jingdianPosition[2] = res.features[0].properties.高度

        bus.$emit('zoomToEntity', this.jingdianPosition)
      }
    },
    removePickPoint() {
      bus.$emit('setMarkerStatus')
      bus.$emit('removeMarker')
    },
    zoomToPickPoint() {
      bus.$emit('zoomToMarker')
    },
    removeJingdian() {
      bus.$emit('removeWantToJingdianMarkers')
    },
    pathAnalysis() {
      bus.$emit('getPath')

      bus.$on('pathLength', data => {
        // 使用接收到的数据
        this.pathLength = (data / 1000).toFixed(2)

        ElNotification({
          title: '分析成功！',
          message: h('i', { style: 'color: teal' }, `从您设定的目标点到${this.state}的距离是：${this.pathLength}千米`),
          type: 'info'
        })
      })
    }
  }
}
</script>

<style lang="less" scoped>
.pathContainer {
  display: flex;
  width: 280px;
  height: 80px;
  border: 10px solid pink;
  border-width: 51px 38px 20px 132px;
  border-image-source: url(../../assets/images/border.png);
  border-image-slice: 51 38 20 132;
  .title {
    position: absolute;
    z-index: 999;
    top: -8px;
    left: 25px;
    height: 18px;
    line-height: 1;
    padding: 0 18px;
    color: red;
    font-size: 18px;
    border-right: 0.025rem solid #00f2f1;
    user-select: none;
  }
  .bcColor {
    position: absolute;
    top: 7px;
    left: 12px;
    width: 423px;
    height: 120px;
    background-color: #00253170;
    // border: 2px solid #1950c4;
    box-shadow: 0 0 5px #0084ff, 0 0 10px #0084ff, 0 0 20px #0084ff;
    // border-radius: 8%;
  }
}

.inner {
  position: absolute;
  display: flex;
  top: 40px;
  left: 15px;
  width: 270px;
  height: 20px;
  .column {
    flex-grow: 1;
    margin-right: 8px;
  }
}
.searchPath {
  position: absolute;
  top: 90px;
  left: 15px;
  width: 350px;
  .jingdianBtn {
    position: absolute;
    top: 0px;
    left: 180px;
  }
  .jingdianBtn1 {
    position: absolute;
    top: 0px;
    left: 230px;
  }
  .jingdianBtn2 {
    position: absolute;
    top: 0px;
    left: 320px;
  }
}
</style>
